<template>
    <div class="researchActivityWarp">
        <div class="activityBox">

            <div class="activityTitle">
                <label>教研活动</label>
                <el-button type="text" style="margin-right: 15px;" @click="isSupervise = !isSupervise">{{isSupervise?'退出管理':'管理'}}</el-button>
                <el-checkbox v-model="isAll" v-if="isSupervise">全选</el-checkbox>
                <el-button type="text" style="color: #F56C6C;" v-if="isSupervise">删除</el-button>
            </div>

            <div class="select">
                <label>筛选：</label>
                <el-select v-model="discussType" placeholder="请选择类型" size="mini">
                    <el-option label="主题类型" value="0"></el-option>
                    <el-option label="主题研讨" value="1"></el-option>
                    <el-option label="课例研讨" value="2"></el-option>
                </el-select>
                <el-button type="primary" size="mini" class="increaseBtn" v-if="!isSupervise" @click="activityDialog=true">添 加</el-button>
            </div>

            <el-row :gutter="10" class="activityRow">
                <el-col :span="4">
                    <div class="activityCover">
                        <el-checkbox v-if="isSupervise" style="float: left"></el-checkbox>
                        <div class="cover">
                            <el-image :src="cover" style="width: 100%;height: 100%"></el-image>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="gridContent">
                        <label>创新素养教育和“互联网+教育”优质课教学</label>
                        <label>为贯彻落实停课不停学</label>
                        <label>
                            主题类型：
                            <span>课例研讨</span> ,
                            活动时间：
                            <span>2019-06-12—2019-03-21</span>
                        </label>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="activityBtn">
                        <el-button type="primary" size="mini" v-if="!isSupervise" @click="activityDialog=true">编 辑</el-button>
                        <el-button type="danger" size="mini">删 除</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="block">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[15, 20, 25, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="添加活动" :visible.sync="activityDialog" width="35%" >
            <el-form :model="activityForm" label-width="148px" class="elActivityForm">
                <el-form-item label="活动标题：">
                    <el-input
                            v-model="activityForm.activityName"
                            placeholder="请输入活动标题"
                            size="mini" class="formItme"
                            maxlength="20"
                            :show-word-limit="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="活动类型：">
                    <el-select
                            v-model="activityForm.activityType"
                            placeholder="请选择活动类型"
                            size="mini"
                            class="formItme">

                        <el-option label="主题类型" value="0"></el-option>
                        <el-option label="课例研讨" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间：">
                    <el-date-picker
                            class="formItme"
                            v-model="activityForm.activityTime"
                            type="daterange"
                            range-separator="至"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            size="mini"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动描述：">
                    <el-input
                            v-model="activityForm.activityDescribe"
                            placeholder="请输入活动描述"
                            size="mini"
                            maxlength="200"
                            type="textarea"
                            rows="4"
                            :show-word-limit="true"
                            class="formItme">
                    </el-input>
                </el-form-item>
                <el-form-item label="课题研讨：">
                    <el-upload
                            class="formItme"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">视频上传区域 /第一版限制上传1个视频</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="教学反思：">
                    <el-input
                            v-model="activityForm.activityReflect"
                            placeholder="请输入教学反思"
                            size="mini"
                            maxlength="200"
                            type="textarea"
                            rows="4"
                            :show-word-limit="true"
                            class="formItme">
                    </el-input>
                </el-form-item>
                <el-form-item label="上传封面：">
                    <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="activityDialog = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="activityDialog = false">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "researchActivity",
        data(){
            return{
                cover: require('../../assets/img/headportrait01.jpg'),
                discussType:'', // 教研活动，筛选条件
                isSupervise:false, // 教研活动,管理
                isAll:false, // 教研活动,全选
                activityForm:{ // 添加/编辑 活动弹窗表单
                    activityName:'',
                    activityType:'',
                    activityTime:'',
                    activityDescribe:'',
                    activityReflect:''
                },
                activityDialog:false, // 添加/编辑 活动弹窗
                imageUrl: '',

                page:1, // 分页 当前页
                pageSize:15,// 分页 每页显示条数
                total:200, // 分页 总条数
            }
        },
        methods:{
            // 封面
            handleAvatarSuccess(res, file) {
                if(res.code == 400){
                    this.$message.warning("图片上传失败！")
                }
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            // 分页  每页显示多少条
            handleSizeChange(val) {
            },

            // 分页 当前页
            handleCurrentChange(val) {
            }
        }
    }
</script>

<style lang="scss" scoped>
.researchActivityWarp{
    width: 100%;

    .activityBox{

        .activityTitle{
            text-align: left;

            &>label{
                color: #303133;
                margin-right: 15px;
                font-size: 16px;
            }
        }

        .select{
            text-align: left;
            position: relative;
            margin-top: 6px;
            margin-bottom: 15px;

            &>label{
                font-size: 14px;
                color: #303133;

            }

            .increaseBtn{
                position: absolute;
                top: 0;
                right: 10px;
            }
        }

        .activityRow{
            box-sizing: border-box;
            padding: 8px 10px;
            background-color: #F2F6FC;
            margin-bottom: 15px;

            .activityCover{
                width: 100%;
                height: 120px;
                line-height: 120px;
                /*display: flex;*/
                /*align-items: center;*/
                /*justify-content: space-between;*/
                .cover{
                    width: calc(100% - 35px);
                    height: 120px;
                    float: right;
                }
            }

            .gridContent{
                width: 100%;
                height: 120px;
                text-align: left;


                & > label{
                    max-width: 80%;
                    display: block;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                label:first-of-type{
                    font-size: 16px;
                    color: #303133;
                }
                label:not(:first-of-type){
                    font-size: 14px;
                    color: #909399;
                    margin-top: 20px;
                }
                label span:first-of-type{
                    color: #409EFF;
                    cursor: pointer;
                }
            }

            .activityBtn{
                width: 100%;
                height: 120px;
                line-height: 120px;
                text-align: right;
            }
        }
    }

    .elActivityForm{
        text-align: left;
        .formItme{
            width: 400px;
            .el-upload-dragger{
                width: 400px;
            }
        }
    }

    .block{
        padding: 15px 0;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>
